<script>
import AMapLoader from "@amap/amap-jsapi-loader";

export default {
	data() {
		return {
			addressList: [],
			marker:{},
			map:{}
		}
	},
	mounted() {
		this.initMap()
	},
	methods: {
		getTreeData() {
			// request({
			// 	url: `/api/tDistrict/findTree`,
			// 	method: 'get',
			// }).then(res => {
			// 	this.treeData = res;
			// })
		},
		getLocationFromAddress(address){
			AMap.plugin('AMap.Geocoder', ()=> {
				let geocoder = new AMap.Geocoder({
					city: '0830' // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
				})
				geocoder.getLocation(address, (status, result)=> {
					if (status === 'complete' && result.info === 'OK') {
						// result中对应详细地理坐标信息
						console.log(result)
						this.addressList = result.geocodes.map(res=>{
							return {
								formattedAddress:res.formattedAddress,
								location:{
									lng:res.location.lng,
									lat:res.location.lat
								}
							}
						});
					}
				})
			})
		},
		initMap() {
			window._AMapSecurityConfig = {
				securityJsCode: "4b713bd5bb16f6957fc24d97522c60ed",
			};
			AMapLoader.load({
				key: "16ede9b4a69c1025eee7e093ec32d5b0", // 申请好的Web端开发者Key，首次调用 load 时必填
				version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
				plugins: ["AMap.Scale"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
			}).then((AMap) => {
				this.map = new AMap.Map("containerAdd", {
					// 设置地图容器id
					viewMode: "3D", // 是否为3D地图模式
					zoom: 11, // 初始化地图级别
					center: [105.819212,28.044248], //地图中心点
				});
				this.map.on('click', this.clickHandler);
			}).catch((e) => {
				console.log(e);
			});
		},
		sureAddress(address){
			this.$emit('setAddress',address)
		},
		clickHandler(e){
			this.map.remove(this.marker);
			//创建一个 Marker 实例：
			this.marker = new AMap.Marker({
				position: new AMap.LngLat(e.lnglat.getLng(), e.lnglat.getLat()), //经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
				title: "选择地点",
			});
			//将创建的点标记添加到已有的地图实例：
			this.map.add(this.marker);
			this.getAddressFromLocation(e.lnglat.getLng(),e.lnglat.getLat())
		},
		getAddressFromLocation(lng,lat){
			AMap.plugin('AMap.Geocoder', () => {
				let geocoder = new AMap.Geocoder({
					city: '010' // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
				})
				let lngLat = [lng, lat]
				geocoder.getAddress(lngLat, (status, result) => {
					if (status === 'complete' && result.info === 'OK') {
						console.log(result)
						this.addressList = [{
							formattedAddress:result.regeocode.formattedAddress,
							location:{
								lng:lng,
								lat:lat
							}
						}]
					}
				})
			})
		}
	}
}
</script>

<template>
	<div class="map-out">
		<div id="containerAdd" style="width:100%; height: 100%;"></div>
		<div class="input-com">
			<div class="addressList" @click="sureAddress(x)" v-for="x in addressList" :key="x.formattedAddress">
				<span class="s1">{{x.formattedAddress}}</span>
				<span class="s2">({{x.location.lng}},{{x.location.lat}})</span>
			</div>
		</div>
	</div>
</template>

<style lang="scss" scoped>
.map-out {
	min-height: 300px;
	#containerAdd{
		width: 100%;
		min-height: 300px;
	}
	.input-com{
		margin-top: 10px;
		.addressList{
			border-radius: 6px;
			background-color: #eeeeee;
			padding: 8px 10px;
			margin-bottom: 10px;
			transition: .5s all;
			cursor: pointer;
			.s2{
				color: #bcbdbe;
			}
		}
		.addressList:hover{
			transition: .5s all;
			transform: translateY(-3px);
		}
	}
}
</style>
